<template>
  <div class="page-fs position-relative">
    <div
      class="position-absolute"
      style="right: 20px; top: 0px; z-index: 1; width: 200px; padding-right: 20px;"
    >
      <ARow>
        <ACol :span="20">
          <AInput
            v-model:value="heading"
            type="number"
            placeholder="请输入角度"
          />
        </ACol>
        <ACol :span="4">
          <AButton @click="headingChange">
            确认
          </AButton>
        </ACol>
      </ARow>
    </div>
    <div
      id="map_container"
      class="page-fs"
      style="margin-top: 50px;"
    />
  </div>
</template>

<script setup>
import loadJS from "@/util/UtilLoadJs";
import {onMounted, ref} from "vue";
import UtilWaitObj from "@/util/util-wait-obj";
import styleJson from "./StyleJson";

onMounted(() => {
  loadJS('https://api.map.baidu.com/api?v=1.0&type=webgl&ak=fttGYPhtEERVKvlyqgoag2YgGhrxRQW5', () => {
    UtilWaitObj.waitObj('BMapGL').then(BMapGL => {
      init(BMapGL)
    })
  })
})

let map

const heading = ref()

const headingChange = function () {
  map.setHeading(heading.value);
}

function init(BMapGL) {
  map = new BMapGL.Map("map_container", {
    // 启用地图旋转
    enableRotate: true,
    // 启用地图倾斜
    enableTilt: true
  });

  const point = new BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(point, 10);
  // 开启鼠标滚轮缩放
  map.enableScrollWheelZoom(true);
  // 设置地图旋转角度
  map.setHeading(180);
  // 设置地图的倾斜角度
  map.setTilt(40);

  // 添加比例尺控件
  map.addControl(new BMapGL.ScaleControl());
  // 添加缩放控件
  map.addControl(new BMapGL.ZoomControl());
  // 添加城市列表控件
  map.addControl(new BMapGL.CityListControl());
  // 添加定位控件
  map.addControl(new BMapGL.LocationControl());
  // 版权控件
  // map.addControl(new BMapGL.CopyrightControl());
  // 移除控件
  // map.removeControl()
  // 设置样式
  map.setMapStyleV2({styleJson: styleJson});

  // 禁用 poi文字及图标
  map.setDisplayOptions({
    poiText: false,  // 隐藏poi标注
    poiIcon: false,  // 隐藏poi图标
    building: false  // 隐藏楼块
  });

  map.setDisplayOptions({
    skyColors: ['rgba(186, 0, 255, 0)','#3063db']
  })

  let bd = new BMapGL.Boundary();
  bd.get('北京市', function (rs) {
    let count = rs.boundaries.length; //行政区域的点有多少个
    let pointArray = [];
    for (let i = 0; i < count; i++) {
      let path = [];
      let str = rs.boundaries[i].replace(' ', '');
      let points = str.split(';');
      for (let j = 0; j < points.length; j++) {
        let lng = points[j].split(',')[0];
        let lat = points[j].split(',')[1];
        path.push(new BMapGL.Point(lng, lat));
      }
      let prism = new BMapGL.Prism(path, 5000, {
        topFillColor: '#3063db',
        topFillOpacity: 0.7,
        sideFillColor: '#3063db',
        sideFillOpacity: 0.9

      });
      map.addOverlay(prism);
    }
  });
}

</script>

<style scoped>

</style>